<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>产妇护理</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
        <script src="./js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
            <!-- Header -->
            <div class="header">
                <!-- 个性化标题 -->
                <div class="mytitle">
                    <label>母婴护理知识共享平台</label>
                </div>
                <!-- 导航栏 -->
                <div class="mymenu-content">
                    <ul class="mymenu">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="message.html">寄语</a></li>
                        <li><a href="">宝贝墙</a></li>
                        <li><a href="about.html">营养推荐</a></li>
                        <li><a href="aihao.html">疾病预防</a></li>
                        <li><a href="books.html">个人中心</a></li>
                    </ul>
                </div>
                <!-- 隐藏功能 -->
                <div class="other-functions">
                    <a href="login.html">登录</a>
                    <label>/</label>
                    <a href="register.html">注册</a>
                </div>
                <!-- 搜索框 -->
                <div class="query">
                    <input class="keyword" placeholder="搜索内容"/>
                    <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
                </div>
            </div>
            <!-- 个性签名 -->
            <div class="my-sign">
                <!--  包含标志和签名 -->
                <div class="my-signImg">
                    <img id="my-signImg" src="img/my-sign.gif">
                    <div class="my-signWord">
                        <span class="my-signTitle" id="my-signTitle">匆匆时光</span>
                        <span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
                    </div>
                </div>
            </div>
            <!-- Content -->
            <div class="main-content" style="text-align: center;background-color: #FFFFFF;width: 85%;margin: auto;padding-top: 20px;">
                <!-- 相册面板 -->
                    <div class="blog-item">
                        <fieldset class="layui-elem-field" style="text-align: left;">
                        <legend>宝贝墙</legend>
                        <div class="layui-field-box" style="padding: 20px 100px;" v-for="item in photos">
                            <style>
                                .photos{
                                        border: none;
                                        width: 500px;
                                        margin: 20px 20px;
                                }
                            </style>
                            <!-- 照片墙 -->
                            <div>
                                <img class="photos" :src="item"/>
                                
                            </div>
                          
                        </div>
                        </fieldset>
            
            </div>
        </div>
    <script src="layui-v2.2.3/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/index.js"></script>
    <script>
        $(function () {
            //init
            component.init();
        });
    </script>
	</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                hello:"helloWorld",
                photos:[
                    "img/001013vaa82975p0dp2pq6.jpg",
                    "img/1474557377390.jpg",
                    "img/147521156134.jpg",
                    "img/2842-106.jpg",
                    "img/32323214_13.jpg",
                    "img/38032151_48.jpg"

                ]
            },
            // 创建就运行
            created() {
            
            },
            // 方法
            methods: {
            
            }
        })
    </script>
</html>
